

<template>
  <div class="common-layout">
    <el-container>
      <el-affix :offset="10">
        <el-radio-group v-model="isCollapse" style="margin-bottom: 20px">
          <el-radio-button :value="false">展开</el-radio-button>
          <el-radio-button :value="true">收起</el-radio-button>
        </el-radio-group>
      </el-affix>
      <el-header> {{ title }} </el-header>
      <el-container>
        <el-aside width="auto">
          <el-menu
            :default-active="route.path"
            class="el-menu-vertical-demo"
            :collapse="isCollapse"
            @open="handleOpen"
            @close="handleClose"
            style="height: 100%"
            :router="true"
            :unique-opened="true"
            :default-openeds="openeds"
          >
            <el-sub-menu
              v-for="item in routerData"
              :key="item.name"
              :index="item.id"
              @click="activeItem(item.title)"
            >
              <template #title>
                <el-icon>
                  <component class="icons" :is="item.icon"></component>
                </el-icon>
                <span> {{ item.name }}</span>
              </template>
              <el-menu-item-group v-for="i in item.children" :key="i.path">
                <el-menu-item :index="i.path">{{ i.name }}</el-menu-item>
              </el-menu-item-group>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-container style="height: 100%">
          <el-main style="height: 100%">
            <RouterView />
          </el-main>
          <el-footer style="background: #0f0">Footer</el-footer>
        </el-container>
      </el-container>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { defineComponent, ref, watch, reactive } from "vue";
import { useRoute, useRouter } from "vue-router";
// 默认展开一个子菜单
const openeds = reactive(["1"]);
// router是全局路由对象
const router = useRouter();
//route是当前路由
const route = useRoute();
//解决页面刷新后 菜单高亮与面包屑不匹配
console.log(route.path, "route");
// 获取全部路由
const routerData = reactive(router.options.routes);
// 标题
const title = ref(routerData[0].title);
const activeItem = (val: string) => {
  title.value = val;
};
const isCollapse = ref(false);
const handleOpen = (key: string, keyPath: string[]) => {
  console.log(key, keyPath, 222);
};
const handleClose = (key: string, keyPath: string[]) => {
  console.log(key, keyPath, 333);
};
</script>

<style lang="scss" scoped>
.el-header {
  text-align: center;
  font-size: 32px;
  font-weight: 800;
  background: #444;
  color: aliceblue;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  // width: 200px;
  // min-height: 400px;
  // height: 50%;
  // flex: 1;
}

.common-layout {
  height: 100%;
}

.el-container {
  height: 100%;
}
</style>



